<template>
  <div class="publish-container">
    <el-card>
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form ref="articleForm" :rules="rules" :model="article" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model.trim="article.title"></el-input>
        </el-form-item>
        <el-form-item label="内容：" prop="content">
          <quill-editor v-model="article.content" :options="editorOption"></quill-editor>
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group v-model="article.cover.type">
            <!-- 根据后端接口约定 -->
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="article.cover.type > 0" class="coverBox">
          <Cover v-for="(item,index) in article.cover.type"
            :key="index"
            :imgurl.sync="article.cover.images[index]"></Cover>
        </div>
         <el-form-item label="频道" prop="channel_id">
           <el-select v-model="article.channel_id" placeholder="请选择频道" clearable>
             <el-option v-for="channel in channels" :key="channel.id" :label="channel.name" :value="channel.id"></el-option>
           </el-select>
         </el-form-item>
       <el-form-item>
          <el-button type="primary" @click="doVali(false)">发表</el-button>
          <el-button @click="doVali(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getArticleChanns, addArticle } from '@/api/article'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Cover from './Cover'
export default {
  components: { quillEditor, Cover },
  data () {
    return {
      article: {
        title: '',
        cover: {
          type: 0,
          images: []
        },
        content: '',
        channel_id: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 5, max: 30, message: '长度在5到30之间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 20, max: 30000, message: '最少20个字', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请选择文章频道', trigger: 'change' }
        ]
      },
      channels: [],
      editorOption: {
        placeholder: '请输入内容', // 占位文字
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  methods: {
    // 获取频道列表
    hGetChanels () {
      getArticleChanns().then(res => {
        this.channels = res.data.data.channels
      })
    },
    // 发布文章
    hAddArticle (draft) {
      // query参数
      const params = {
        draft
      }
      // body参数
      const data = this.article
      addArticle(params, data).then(res => {
        this.$message.success('发布成功')
        // 清空发布区域
        this.article.title = ''
        this.article.content = ''
        this.article.cover = {
          type: 0,
          images: []
        }
      })
    },
    doVali (draft) {
      this.$refs.articleForm.validate((valid) => {
        if (valid) {
          this.hAddArticle(draft)
        } else {
          return false
        }
      })
    }
  },
  mounted () {
    this.hGetChanels()
  }
}
</script>

<style lang="less" scoped>
    .coverBox{
        margin-left:70px;
        margin-bottom: 20px;
      }
</style>
